<template>

  <div id="backcont">
    <div class="medium-content">
      <div class="login-cont">
        <div class="medium-title">USST食堂点评系统
        </div>


        <div class="medium-user">
          <p>账号</p>
          <el-input class="inptflex" v-model="account" placeholder="Please input the id"/>
        </div>
        <div class="medium-user">
          <p>密码
          </p>
          <el-input class="inptflex" v-model="password" placeholder="Please input the password"/>
        </div>
        <div class="medium-user">
          <p>确定密码
          </p>
          <el-input class="inptflex" v-model="vertify_password" placeholder="Please again the password"/></div>
          <div >

            <router-link to="/login" class="reg-view">登录</router-link>
          </div>

        <!--登录注册按钮-->
        <el-button type="primary" @click="register" class="medium-btn">注册</el-button>
        <div>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
import {reactive, toRefs} from 'vue'
import {Plus, Delete, Edit, More, Refresh, Search} from "@element-plus/icons-vue";
import {ElMessageBox, genFileId, ElMessage} from "element-plus";
export default {
  setup() {
    const user = reactive(
        {
          account: '',
          password: '',
          vertify_password:''
        })

    //login
    const register=()=>{
      //test
      //  console.log(user.account,user.password)
    }
    //register
    return {...toRefs(user),register}
  }
}
</script>
<style scoped>
/*--login&register--*/
#backcont {
  background-image: url(../assets/usst.png);
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-background-size: cover;
  moz-background-size: cover;
  min-height: 100vh;
}

.medium-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.login-cont {
  width: 500px;
  height: 300px;
  background: #f9de80;
  border-radius: 5px;
}

.medium-title {
  text-align: center;
  color: #000000;
  font-size: 30px;
  padding-top: 30px;
  font-family: Arial， Helvetica, sans-serif;
}

.medium-user {
  width: 400px;
  margin: 0 auto;
  padding-top: 30px;
  height: 40px;
  display: flex;
  align-items: center;
}

.medium-user p {
  width: 70px;
  color: #000000;
  font-size: 16px;
}

.inptflex {
  flex: 1;
}

.reg-view {
  width: 400px;
  display: flex;
  justify-content: flex-end;
  margin: 0 auto;
  padding-top: 10px;
}

.reg-view p {
  cursor: pointer;
  display: contents;
}

.medium-btn {
  width: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 10px auto 0;
  autofont-size: 16px;
}
</style>
